<template>
	<div class="main">
		<el-card shadow="never" class="card">
			<div class="heads">{{heads}}</div>
			
			</el-card>
			<!-- 表单区 -->
			<el-card shadow="never" class="card2">
				<el-table :data="form" border style="width: 100%" >
					<el-table-column fixed type="index" align="center" label="序号" width="150">
					</el-table-column>
					<el-table-column prop="username" label="用户名" align="center" width="150">
					</el-table-column>
					<!-- 判断男女 -->
					<el-table-column  label="性别" align="center" width="150">
						<template slot-scope="scope">
							<div>{{scope.row.sex == 0? '男':'女'}}</div>
						</template>
					</el-table-column>
				
					<el-table-column label="头像" width="120">
						<template slot-scope="scope">
							<img :src="scope.row.icon" alt="" style="width: 80px; height: 80px;">
						</template>
					</el-table-column>
					<el-table-column label="添加时间" align="center" width="180">
						<template slot-scope="scope">
							<div>{{scope.row.modifyTime}}</div>
						</template>
					</el-table-column>
					<el-table-column prop="nickname" label="昵称" align="center" width="150">
					</el-table-column>
					
					<!-- <el-table-column fixed="right" label="操作" width="100">
						<template slot-scope="scope">
							<el-button @click="goEdit(scope.row.id)" type="text" size="small">编辑</el-button>
							<el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
						</template>
					</el-table-column> -->
				</el-table>
				<!-- 分页 -->
				<div class="block">
				
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page.currentpage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="page.total">
					</el-pagination>
				</div>
				</el-card>
	</div>
</template>

<script>
	 import{
		findMembersByPage
	 } from "@/api/user/index.js"
	export default{
		data(){
			return{
				heads:"注册用户列表",
				form:[],
				page:{
					currentpage: 1,
					pageSizes: [10, 15, 20, 25],
					pageSize: 10,
					total: 0
				}
			}
		},
		methods:{
			// 分页
			handleSizeChange(val) {
				this.page.pageSize = val
				this.getUser()
			},
			handleCurrentChange(val) {
				console.log(val)
				this.page.currentpage = val
				 this.getUser()
			},
			 // 获取注册用户列表
			 getUser(){
			 	findMembersByPage(this.page.currentpage,this.page.pageSize,this.form).then(res=>{
			 		console.log(res)
					this.form = res.data.rows
					this.page.total =res.data.total
			 	})
		 }
		},
		created() {
			this.getUser()
		}
	}
</script>

<style scoped lang="scss">
	.main{
		padding: 30px;
		.card{
			
		}
	}
</style>
